import { Component, OnInit } from '@angular/core';
import { HeroService } from '../service/hero.service'
import { Hero } from '../entity/hero'

//component修饰器考试当前的类是组件的定义类，angular会基于修饰器的配置项创建组件和组件的视图
@Component({
  selector: 'app-hero-list',//css选择器，它告诉 Angular 在父级 HTML 中查找<hero-list>标签，创建并插入该组件
  templateUrl: './hero-list.component.html',//组件模板的地址
  styleUrls: ['./hero-list.component.css'],//组件模板的css样式文件地址，该地址可能有多个，所以这里是类似数组的定义
  providers:[ HeroService ]//组件所需要的服务的依赖注入提供数组，这里是告诉angular当前组件需要一个HeroSevice的服务，组件从这个服务中获取数据
})
export class HeroListComponent implements OnInit {
  title = 'Tour of Heroes';
  heroes:Hero[];//定义列表循环的存储数据
  selectedHero:Hero;

  //这里比较重要有一个将HeroService服务注入到server中的操作
  constructor(private server:HeroService) {}

  //函数通过服务中的getHeroes函数获取到测试员数据，里面的这个承诺的then的用法还不是太明白，后面搞明白了在过来补充
  getHeroes(): void {
    this.server.getHeroes().then(heroes => this.heroes = heroes);
  }
  //初始化组件
  ngOnInit(): void {
    this.getHeroes();
  }
  //点击响应函数
  selectHero(Hero:Hero){
    this.selectedHero = Hero;
    // console.log(this.selectedHero);//初始的时候在控制台输出选择英雄，如果能够正常输出那么就说明已经能够正常调用了
  }
}
